<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
        <div class="card__content">
          <!-- 1.<div :class="['emoji',{pulse:!isActive}]">🫵</div> -->
          <!-- 2. <transition name="slide">
              <div v-if="isActive" class="emoji">
                🫵
              </div>
           </transition> -->
          <transition class="aniamte__tada"
          enter-active-class="animate__animated animate__tada"
          leave-active-class="animate__animated animate__bounce"
          >
           <div v-if="isActive" class="emoji">🫵</div>
          </transition>
        </div>
        <div class="card__action">
          <button tpye="button" @click="isActive=!isActive;">请按这里</button>
        </div>
    </div>
    
  </div>
</template>

<script setup>
import { ref } from 'vue';


const name = '旅梦开发团';
const isActive = ref(false);

</script>

<style lang="css" scoped>
@import './styles/app.css';
@import './styles/card.css';
@import './styles/animation.css';




</style>